<template>
    <div class="area-content-pro">
        <div id="main_right_B"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal, "11111111");
                //新旧值不同
                setTimeout(() => {
                    this.iconName = this.datas
                    this.area()
                    this.area_()

                }, 1000);
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
        area() {
            var chartDom = document.getElementById('main_right_B');
            console.log(chartDom);
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    top: '25%',
                    bottom: 20,
                    left: "right",
                    itemGap: 30
                },
                series: [
                    {
                        name: '问题总数统计',
                        type: 'pie',
                        color: ["rgba(79, 128, 172, 0.6)", "rgba(124, 156, 173, 0.6)", "rgba(202, 184, 119, 0.6)", "rgba(189, 143, 78, 0.6)"],
                        radius: ['40%', '65%'],
                        center: ['35%', '45%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        label: {
                            show: true,
                            position: 'center',
                            normal: {
                                position: "inside", // 在内部显示，outseide 是在外部显示
                                show: true,
                                formatter: "{b}" // formatter 是标签内容的格式器
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'A列装置' },
                            { value: 735, name: 'B列装置' },
                            { value: 580, name: 'C列装置' },
                            { value: 484, name: 'D列装置' }
                        ]
                    },{
                        name: '问题总数统计',
                        type: 'pie',
                        color: ["#4F80AC", "#7C9CAD", "#CAB877", "#BD8F4E"],
                        radius: ['40%', '45%'],
                        center: ['35%', '45%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        label: {
                            show: true,
                            position: 'center',
                            fontSize:"24"
                           
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'A列装置' },
                            { value: 735, name: 'B列装置' },
                            { value: 580, name: 'C列装置' },
                            { value: 484, name: 'D列装置' }
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="scss" scoped>
.area-content-pro {
    position: relative;

    #main_right_B {
        width: 361px;
        height: 305px;
    }

}
</style>